<template>
  <div>
    <div id="mapBoxContainer" style="position: absolute; width: 100%; height: 100%"></div>

    <el-dialog v-model="dialogVisible" width="800">
      <div v-if="dialogInfo.type == 'line'">
        <el-descriptions title="管网信息" :column="2" border>
          <el-descriptions-item>
            <template #label>管线编号：</template>
            {{ dialogInfo.info.note }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>管径：</template>
            {{ dialogInfo.info.material }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>起点名称：</template>
            {{ lineInfo.startName }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>终点名称：</template>
            {{ lineInfo.endNAame }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>起点埋深：</template>
            {{ lineInfo.startName }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>终点埋深：</template>
            {{ lineInfo.endNAame }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>年份：</template>
            {{ lineInfo.time }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>材质：</template>
            {{ dialogInfo.info.material }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>所在路名：</template>
            {{ lineInfo.roadName }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>起点经度：</template>
            {{ mapWaterPlantData[0].geometry.coordinates ? mapWaterPlantData[0].geometry.coordinates[0] : '106.07829273'
            }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>终点经度：</template>
            {{ mapWaterPlantData[0].geometry.coordinates ? mapWaterPlantData[0].geometry.coordinates[1] : '25.80763534' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else-if="dialogInfo.type == 'liuliangji'">
        <el-descriptions title="流量计设备" :column="2" border>
          <el-descriptions-item>
            <template #label>名称：</template>
            {{ dialogInfo.info.name }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>设备编号：</template>
            <div>00001</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>设备状态：</template>
            <div>在线</div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>当前电压：</template>
            <div>220v</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>当前电流：</template>
            <div>1000A</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>净积累流量：</template>
            <div>15000</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>供水温度：</template>
            <div>10℃</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>流体速度：</template>
            <div>0.15</div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>正积累流量：</template>
            <div>150000</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else-if="dialogInfo.type == 'yaliji'">
        <el-descriptions title="压力监测" :column="2" border>
          <el-descriptions-item>
            <template #label>名称：</template>
            {{ dialogInfo.info.name }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>设备编号：</template>
            <div>00001</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>设备状态：</template>
            <div>在线</div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>当前电压：</template>
            <div>220v</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>当前电流：</template>
            <div>1000A</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>开机时间：</template>
            <div>2024-07-01</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>开机时长：</template>
            <div>150个小时</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else-if="dialogInfo.type == 'diancifa'">
        <el-descriptions title="泵站信息" :column="2" border>
          <el-descriptions-item>
            <template #label>名称：</template>
            {{ dialogInfo.info.name }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>设备编号：</template>
            <div>00001</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>设备状态：</template>
            <div>在线</div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>当前电压：</template>
            <div>220v</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>当前电流：</template>
            <div>1000A</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>开机时间：</template>
            <div>2024-07-01</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>开机时长：</template>
            <div>150个小时</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div v-else-if="dialogInfo.type == 'waterSource'">
        <el-descriptions title="水源地信息" :column="2" border>
          <el-descriptions-item>
            <template #label>名称：</template>
            三岔河
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>水库编号：</template>
            <div>XY1513</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>类型：</template>
            <div>水库</div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>死水位：</template>
            <div>2121</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>汛限水位：</template>
            <div>52215</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>设计水位：</template>
            <div>1000</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>死库容：</template>
            <div>1000</div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>当前库容：</template>
            <div>1000</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div v-else-if="dialogInfo.type == 'waterPlant'">
        <el-descriptions title="水厂信息" :column="2" border>
          <el-descriptions-item>
            <template #label>名称：</template>
            {{ dialogInfo.info.name }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>地址：</template>
            <div>三岔河</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>联系人：</template>
            <div>何斌</div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>联系电话：</template>
            <div>17557263214</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>设计产量：</template>
            <div>1404</div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>实际产量：</template>
            <div>1501</div>
          </el-descriptions-item>

        </el-descriptions>
      </div>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import mapboxGl from 'mapbox-gl'
import MapboxLanguage from '@mapbox/mapbox-gl-language'
import MapHandleUtils from './mapUtils/handle.js'
import waterPlantImg from '@/assets/images/map/water_plant.png'
import waterSourceImg from '@/assets/images/map/water_source.png'
import diancifaImg from '@/assets/images/map/diancifa.png'
import liuliangjiImg from '@/assets/images/map/liuliangji.png'
import yalijiImg from '@/assets/images/map/yaliji.png'
import poolSourceImg from '@/assets/images/map/poolSourceImg.png'
import drainagePointImg from '@/assets/images/map/drainagePointImg.png'
import mapLineData from '@/assets/mapData/line_data.json'
const { MapboxLayer, TripsLayer } = deck
const mapCenterPosition = ref([105.98183854, 25.78806774])

const mapboxGlObj = ref(null)
const lineLayerConfigs = ref({})
const layerVisibleConfigs = ref({})
const bgBlueLineConfigs = ref({})
const bgHightLightLineConfigs = ref({})
const bgWhiteLineConfigs = ref({})
const mapIds = ref({})
const isClearLineLayer = ref(false)
const flowLineRanderData = ref({})

const dialogVisible = ref(false)
const dialogInfo = ref({})

const lineInfo = ref({
  pipe: 40,
  startName: '白石岩乡',
  endNAame: '紫云县',
  time: '2022-10-03',
  roadName: '祥云路',
})
//图层的显隐标识
const layerVisibleStatus = ref({
  lineLayer: true,
  waterSource: false,
  waterPlant: false,
  waterFlowmeter: false,
  pressureDetection: false,
  poolSource: false, //水池
  drainagePoint: false, // 排水点位
})
//点类型标识，用于区分不同的数据
const marketType = ref({
  waterSource: 'waterSource',
  waterPlant: 'waterPlant',
  waterFlowmeter: 'waterFlowmeter',
  pressureDetection: 'PressureDetection',
  diancifa: 'diancifa',
  poolSource: 'poolSource', //水池
  drainagePoint: 'drainagePoint', // 排水点位
})
//点位基础数据源
const marketPointObj = ref({
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [],
  },
})
//水厂数据
const mapWaterPlantData = [
  {
    type: 'Feature',
    properties: {
      icon: 'waterPlant',
      type: marketType.value.waterPlant,
      name: '三岔河水厂',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.07829273, 25.80763534],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'waterPlant',
      type: marketType.value.waterPlant,
      name: '三岔河水厂',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.028751, 25.745693],
    },
  },
]
//流量计
const mapWaterFlowmeterData = [
  {
    type: 'Feature',
    properties: {
      icon: 'liuliangji',
      type: marketType.value.waterFlowmeter,
      name: '三岔河流量计#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.042837, 25.79567],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'liuliangji',
      type: marketType.value.waterFlowmeter,
      name: '三岔河流量计#2',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.068133, 25.802436],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'liuliangji',
      type: marketType.value.waterFlowmeter,
      name: '三岔河流量计#3',
    },
    geometry: {
      type: 'Point',
      coordinates: [105.990519, 25.776671],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'liuliangji',
      type: marketType.value.waterFlowmeter,
      name: '三岔河流量计#4',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.075319, 25.718873],
    },
  },
]

//压力检测
const mapPressureDetectionData = [
  {
    type: 'Feature',
    properties: {
      icon: 'yaliji',
      type: marketType.value.pressureDetection,
      name: '压力检测点#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.063534, 25.757668],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'yaliji',
      type: marketType.value.pressureDetection,
      name: '压力检测点#2',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.063534, 25.757668],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'yaliji',
      type: marketType.value.pressureDetection,
      name: '压力检测点#3',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.045999, 25.824293],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'yaliji',
      type: marketType.value.pressureDetection,
      name: '压力检测点#4',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.148621, 25.738663],
    },
  },
]
//水源数据
const mapWaterSourceData = [
  {
    type: 'Feature',
    properties: {
      icon: 'waterSource',
      type: marketType.value.waterSource,
      name: '三岔河水库',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.19133363, 25.83066197],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'waterSource',
      type: marketType.value.waterSource,
      name: '三岔河水库',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.07829273, 25.80763534],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'waterSource',
      type: marketType.value.waterSource,
      name: '三岔河水库',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.074026, 25.781486],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'waterSource',
      type: marketType.value.waterSource,
      name: '三岔河水库',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.118582, 25.776541],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'waterSource',
      type: marketType.value.waterSource,
      name: '三岔河水库',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.032776, 25.761313],
    },
  },
]
//电磁阀
const mapDiancifaData = [
  {
    type: 'Feature',
    properties: {
      icon: 'diancifa',
      type: marketType.value.diancifa,
      name: '电磁阀#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.056635, 25.764957],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'diancifa',
      type: marketType.value.diancifa,
      name: '电磁阀#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [105.995119, 25.721998],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'diancifa',
      type: marketType.value.diancifa,
      name: '电磁阀#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.119588, 25.821431],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'diancifa',
      type: marketType.value.diancifa,
      name: '电磁阀#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.119588, 25.821431],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'diancifa',
      type: marketType.value.diancifa,
      name: '电磁阀#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.039387, 25.787862],
    },
  },
]

//水池
const mapPoolData = [
  {
    type: 'Feature',
    properties: {
      icon: 'pool',
      type: marketType.value.poolSource,
      name: '紫云小区水池#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.056635, 25.764957],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'pool',
      type: marketType.value.poolSource,
      name: '紫云小区水池#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [105.995119, 25.721998],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'pool',
      type: marketType.value.poolSource,
      name: '紫云小区水池#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.119588, 25.821431],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'pool',
      type: marketType.value.poolSource,
      name: '紫云小区水池#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.119588, 25.821431],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'pool',
      type: marketType.value.poolSource,
      name: '紫云小区水池#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.039387, 25.787862],
    },
  },
]

//排水点位
const mapDrainagePointData = [
  {
    type: 'Feature',
    properties: {
      icon: 'drainagePoint',
      type: marketType.value.drainagePoint,
      name: '排水点位#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [105.99881887435913, 25.781305075524955],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'drainagePoint',
      type: marketType.value.drainagePoint,
      name: '排水点位#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [105.9523093700409, 25.80540656050964],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'drainagePoint',
      type: marketType.value.drainagePoint,
      name: '排水点位#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [106.00196242332458, 25.80138837674376],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'drainagePoint',
      type: marketType.value.drainagePoint,
      name: '排水点位#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [105.95970153808594, 25.83454397356806],
    },
  },
  {
    type: 'Feature',
    properties: {
      icon: 'drainagePoint',
      type: marketType.value.drainagePoint,
      name: '排水点位#1',
    },
    geometry: {
      type: 'Point',
      coordinates: [105.9523093700409, 25.76628143173481],
    },
  },
]

onMounted(() => {
  initMap()
})

const initMap = () => {
  handleFlyLine()

  //读取配置
  if (window.MapBaseConfig) {
    lineLayerConfigs.value = {
      ...lineLayerConfigs.value,
      ...window.MapBaseConfig.trackLineConfig,
    }
    bgBlueLineConfigs.value = {
      ...window.MapBaseConfig.bgBlueLineConfigs,
    }
    bgHightLightLineConfigs.value = {
      ...window.MapBaseConfig.bgHightLightLineConfigs,
    }
    bgWhiteLineConfigs.value = {
      ...window.MapBaseConfig.bgWhiteLineConfigs,
    }
    mapboxGl.accessToken = window.MapBaseConfig.mapAccessToken

    layerVisibleConfigs.value = window.MapBaseConfig.layerVisibleConfigs
  }

  //初始化图层、数据源的 ID 值
  mapIds.value = {
    layerIds: {
      bgWhiteLineLayer: MapHandleUtils.getLayerSourcrId('bgWhiteLine'), //白色管线图层
      bgBlueLineLayer: MapHandleUtils.getLayerSourcrId('bgBlueLine'), //蓝色管线图层
      marketLayer: MapHandleUtils.getLayerSourcrId('marketPoint'), //点标记
      flowPipeLineLayer: MapHandleUtils.getLayerSourcrId('flowPipeLine'), //管线轨迹
      highlightLineLayer: MapHandleUtils.getLayerSourcrId('highlightLine'), //高亮展示的图层
      highlightQueryLineLayer:
        MapHandleUtils.getLayerSourcrId('highlightQueryLine'), //不可见，供点击查询管线用
    },
    dataIds: {
      bgWhiteLineData: MapHandleUtils.getDataSourcrId('bgWhiteLine'),
      bgBlueLineData: MapHandleUtils.getDataSourcrId('bgBlueLine'),
      marketData: MapHandleUtils.getDataSourcrId('marketPoint'),
      highlightLineData: MapHandleUtils.getDataSourcrId('highlightLine'),
      highlightQueryLineData:
        MapHandleUtils.getDataSourcrId('highlightQueryLine'),
    },
  }

  //创建地图
  mapboxGlObj.value = new mapboxGl.Map({
    container: 'mapBoxContainer',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: mapCenterPosition.value,
    zoom: 12,
    pitch: 0,
    bearing: 0,
    antialias: true,
  })
  // 设置语言
  mapboxGlObj.value.addControl(
    new MapboxLanguage({
      defaultLanguage: 'zh-Hans',
    })
  )

  //地图点击事件
  mapboxGlObj.value.on('click', (mapEvent) => {
    queryMapClickTarget(mapEvent)
  })

  //地图加载事件
  mapboxGlObj.value.on('load', () => {
    addFlowLine(flowLineRanderData.value)
    initWaterPlantMarketImg()
  })
}

//设置地图中心点
const setMapFlyto = (lnglat, _zoom) => {
  if (!lnglat) return
  mapboxGlObj.value.flyTo({
    center: lnglat,
    zoom: _zoom || 12,
  })
}

//处理流动管线数据
const handleFlyLine = () => {
  mapLineData.features.map((item) => {
    let resultLineDatas = []
    let tempList = item.geometry.coordinates
    tempList.map((citem) => {
      if ((citem[0] + '').indexOf('25') == 0) {
        resultLineDatas.push([citem[1], citem[0]])
      } else {
        resultLineDatas.push(citem)
      }
    })
    item.geometry.coordinates = resultLineDatas
  })

  let featuresArrays = mapLineData.features || []
  let result = []
  let maxTime = 10
  for (var i = 0; i < featuresArrays.length; i++) {
    let startTime = 0
    let temptimestamps = []
    featuresArrays[i].geometry.coordinates.map((item) => {
      startTime += 10
      temptimestamps.push(startTime)
      maxTime = startTime > maxTime ? startTime : maxTime
    })
    result.push({
      vendor: 0,
      path: featuresArrays[i].geometry.coordinates,
      timestamps: temptimestamps,
    })
  }

  flowLineRanderData.value = {
    allPaths: featuresArrays,
    maxTime,
    result,
  }
}

//添加管线、背景线、流动线
const addFlowLine = (obj) => {
  //添加管道背景线图层（蓝色底）
  addSignBgLine(
    obj.allPaths,
    {
      layerId: mapIds.value.layerIds.bgBlueLineLayer,
      dataId: mapIds.value.dataIds.bgBlueLineData,
    },
    bgBlueLineConfigs.value
  )
  //白色背景图
  addSignBgLine(
    obj.allPaths,
    {
      layerId: mapIds.value.layerIds.bgWhiteLineLayer,
      dataId: mapIds.value.dataIds.bgWhiteLineData,
    },
    bgWhiteLineConfigs.value
  )

  //不可见、宽度比较宽的线图层，便于点击后能查询到管线数据，线条太细会导致地图点击时很难查询到对应的管线
  addSignBgLine(
    obj.allPaths,
    {
      layerId: mapIds.value.layerIds.highlightQueryLineLayer,
      dataId: mapIds.value.dataIds.highlightQueryLineData,
    },
    {
      'line-width': 12,
      'line-color': '#fff333',
      'line-opacity': 0,
    }
  )

  //添加流动线
  let deckLayer = new MapboxLayer({
    id: mapIds.value.layerIds.flowPipeLineLayer,
    type: TripsLayer,
    data: obj.result,
    getPath: (d) => d.path,
    getTimestamps: (d) => d.timestamps, // 该时间数组对应流动线条应该在什么时间点移动到对应下标的坐标点
    getColor: (d) => {
      return lineLayerConfigs.value.trailColor
    },
    ...lineLayerConfigs.value,
  })
  mapboxGlObj.value.addLayer(deckLayer)

  //循环更新动画
  function animate() {
    lineLayerConfigs.value.time =
      (lineLayerConfigs.value.time + lineLayerConfigs.value.animationSpeed) %
      lineLayerConfigs.value.loopLength
    if (lineLayerConfigs.value.time >= obj.maxTime) {
      lineLayerConfigs.value.time = 20
    }
    deckLayer.setProps({
      currentTime: lineLayerConfigs.value.time,
    })
    if (!isClearLineLayer.value) {
      window.requestAnimationFrame(animate)
    }
  }
  setTimeout(() => {
    isClearLineLayer.value = false
    window.requestAnimationFrame(animate)
  }, 200)
}

//查询是否点击到管线、标记等
const queryMapClickTarget = (mapEvent) => {
  deleteLayerAndData({
    layerId: mapIds.value.layerIds.highlightLineLayer,
    dataId: mapIds.value.dataIds.highlightLineData,
  })

  let feartures = mapboxGlObj.value.queryRenderedFeatures(mapEvent.point, {
    layers: [mapIds.value.layerIds.highlightQueryLineLayer],
  })
  if (feartures && feartures.length > 0) {
    console.log('查询点击的管线 = ', feartures)
    let temp = MapHandleUtils.getLineFeatureObj()
    temp.properties = feartures[0].properties
    temp.geometry.coordinates = feartures[0].geometry.coordinates

    addSignBgLine(
      [temp],
      {
        layerId: mapIds.value.layerIds.highlightLineLayer,
        dataId: mapIds.value.dataIds.highlightLineData,
      },
      {
        ...bgHightLightLineConfigs.value,
      }
    )

    MapHandleUtils.changeMapLayerLevel(
      mapboxGlObj.value,
      mapIds.value.layerIds.bgWhiteLineLayer,
      mapIds.value.layerIds.highlightLineLayer
    )
    temp.properties.mapDataType = 'hightLightline'

    showPop('line', temp.properties)
  } else {
    feartures = mapboxGlObj.value.queryRenderedFeatures(mapEvent.point, {
      layers: [mapIds.value.layerIds.marketLayer],
    })
    console.log('查询点击的标记 = ', feartures)
    if (feartures && feartures.length > 0) {
      if (feartures[0].properties.icon == 'yaliji') {
        //压力监测
        showPop('yaliji', feartures[0].properties)
      } else if (feartures[0].properties.icon == 'liuliangji') {
        //流量计
        showPop('liuliangji', feartures[0].properties)
      } else if (feartures[0].properties.icon == 'diancifa') {
        //泵站
        showPop('diancifa', feartures[0].properties)
      } else if (feartures[0].properties.icon == 'waterSource') {
        //水源地
        showPop('waterSource', feartures[0].properties)
      } else if (feartures[0].properties.icon == 'waterPlant') {
        //水厂
        showPop('waterPlant', feartures[0].properties)
      }
    }
  }
}

//添加线图层
const addSignBgLine = (lineDatas, sourceObj, obj) => {
  if (!lineDatas) return

  deleteLayerAndData(sourceObj)

  if (checkLayerIsVisible(sourceObj.layerId)) {
    mapboxGlObj.value.addSource(sourceObj.dataId, {
      type: 'geojson',
      data: MapHandleUtils.getFeatureCollectionObj(lineDatas),
    })
    mapboxGlObj.value.addLayer(
      MapHandleUtils.getLineLayerObj(sourceObj.layerId, sourceObj.dataId, obj)
    )
    MapHandleUtils.setLayerVisibleZoom(
      mapboxGlObj.value,
      sourceObj.layerId,
      5,
      25
    )
  }
}

//查看配置中是否隐藏了图层
const checkLayerIsVisible = (layerId) => {
  let isShow = true
  for (let configItem in layerVisibleConfigs.value) {
    if (configItem == layerId) {
      isShow = layerVisibleConfigs.value[configItem] || false
      break
    }
  }
  return isShow
}

const deleteLayerAndData = (sourceObj) => {
  MapHandleUtils.deleteMapLayer(mapboxGlObj.value, sourceObj.layerId)
  MapHandleUtils.deleteDataSource(mapboxGlObj.value, sourceObj.dataId)
}

//预加载点位图片，图层，数据源
const initWaterPlantMarketImg = () => {
  const size = 116
  const width = 116
  const height = 116

  let imgArr = [
    {
      name: 'map-waterSource',
      img: waterSourceImg,
    },
    {
      name: 'map-waterPlant',
      img: waterPlantImg,
    },
    {
      name: 'map-diancifa',
      img: diancifaImg,
    },
    {
      name: 'map-liuliangji',
      img: liuliangjiImg,
    },
    {
      name: 'map-yaliji',
      img: yalijiImg,
    },
    {
      name: 'map-pool',
      img: poolSourceImg,
    },
    {
      name: 'map-drainagePoint',
      img: drainagePointImg,
    },
  ]
  for (let i = 0; i < imgArr.length; i++) {
    mapboxGlObj.value.addImage(
      imgArr[i].name,
      {
        width: size,
        height: size,
        data: new Uint8Array(size * size * 4),
        onAdd: function () {
          const canvas = document.createElement('canvas')
          canvas.width = width
          canvas.height = height
          this.context = canvas.getContext('2d')
        },
        render: function () {
          const img = document.createElement('img')
          img.src = imgArr[i].img
          const _this = this
          const context = this.context
          img.onload = function () {
            context.drawImage(this, 0, 0)
            _this.data = context.getImageData(0, 0, width, height).data
          }
          return true
        },
      },
      { pixelRatio: 2 }
    )
  }

  //先添加基础的点位数据源和点图层
  mapboxGlObj.value.addSource(
    mapIds.value.dataIds.marketData,
    marketPointObj.value
  )
  mapboxGlObj.value.addLayer({
    id: mapIds.value.layerIds.marketLayer,
    type: 'symbol',
    source: mapIds.value.dataIds.marketData,
    layout: {
      'icon-image': 'map-{icon}',
    },
  })
}

/**
 *
 * 切换管网线条显隐状态
 *
 */
const changeLineStatus = () => {
  if (mapboxGlObj.value) {
    if (layerVisibleStatus.value.lineLayer) {
      isClearLineLayer.value = true
      mapboxGlObj.value.removeLayer(mapIds.value.layerIds.bgBlueLineLayer)
      mapboxGlObj.value.removeLayer(mapIds.value.layerIds.bgWhiteLineLayer)
      mapboxGlObj.value.removeLayer(mapIds.value.layerIds.flowPipeLineLayer)
    } else {
      isClearLineLayer.value = false
      addFlowLine(flowLineRanderData.value)
    }
    layerVisibleStatus.value.lineLayer = !layerVisibleStatus.value.lineLayer
  }
}

/**
 * 切换水源地显隐状态
 */
const changeWaterSourceStatus = () => {
  if (mapboxGlObj.value) {
    if (layerVisibleStatus.value.waterSource) {
      updateMapMarketData(
        'del',
        marketType.value.waterSource,
        mapWaterSourceData
      )
    } else {
      updateMapMarketData(
        'add',
        marketType.value.waterSource,
        mapWaterSourceData
      )
      setMapFlyto(mapWaterSourceData[0].geometry.coordinates)
    }
    layerVisibleStatus.value.waterSource = !layerVisibleStatus.value.waterSource
  }
}

/**
 * 切换电磁阀显隐状态
 */
const changeDiancifaStatus = () => {
  if (mapboxGlObj.value) {
    if (layerVisibleStatus.value.diancifa) {
      updateMapMarketData('del', marketType.value.diancifa, mapDiancifaData)
    } else {
      updateMapMarketData('add', marketType.value.diancifa, mapDiancifaData)
      setMapFlyto(mapDiancifaData[0].geometry.coordinates)
    }
    layerVisibleStatus.value.diancifa = !layerVisibleStatus.value.diancifa
  }
}

/**
 * 切换水厂显隐状态
 */
const changeWaterPlantStatus = () => {
  if (mapboxGlObj.value) {
    if (layerVisibleStatus.value.waterPlant) {
      updateMapMarketData('del', marketType.value.waterPlant, mapWaterPlantData)
    } else {
      updateMapMarketData('add', marketType.value.waterPlant, mapWaterPlantData)
      setMapFlyto(mapWaterPlantData[0].geometry.coordinates)
    }
    layerVisibleStatus.value.waterPlant = !layerVisibleStatus.value.waterPlant
  }
}

/**
 * 切换水池显隐状态
 */
const changePoolStatus = () => {
  if (mapboxGlObj.value) {
    if (layerVisibleStatus.value.poolSource) {
      updateMapMarketData('del', marketType.value.poolSource, mapPoolData)
    } else {
      updateMapMarketData('add', marketType.value.poolSource, mapPoolData)
      setMapFlyto(mapPoolData[0].geometry.coordinates)
    }
    layerVisibleStatus.value.poolSource = !layerVisibleStatus.value.poolSource
  }
}

/**
 * 切换排水点位显隐状态
 */
const changeDrainagePointStatus = () => {
  if (mapboxGlObj.value) {
    if (layerVisibleStatus.value.drainagePoint) {
      updateMapMarketData('del', marketType.value.drainagePoint, mapDrainagePointData)
    } else {
      updateMapMarketData('add', marketType.value.drainagePoint, mapDrainagePointData)
      setMapFlyto(mapDrainagePointData[0].geometry.coordinates)
    }
    layerVisibleStatus.value.drainagePoint = !layerVisibleStatus.value.drainagePoint
  }
}

/**
 * 切换流量计显隐状态
 */
const changeWaterFlowmeterStatus = () => {
  if (mapboxGlObj.value) {
    if (layerVisibleStatus.value.waterFlowmeter) {
      updateMapMarketData(
        'del',
        marketType.value.waterFlowmeter,
        mapWaterFlowmeterData
      )
    } else {
      updateMapMarketData(
        'add',
        marketType.value.waterFlowmeter,
        mapWaterFlowmeterData
      )
      setMapFlyto(mapWaterFlowmeterData[0].geometry.coordinates)
    }
    layerVisibleStatus.value.waterFlowmeter =
      !layerVisibleStatus.value.waterFlowmeter
  }
}

/**
 * 切换压力检测显隐状态
 */
const changePressureDetectionStatus = () => {
  if (mapboxGlObj.value) {
    if (layerVisibleStatus.value.pressureDetection) {
      updateMapMarketData(
        'del',
        marketType.value.pressureDetection,
        mapPressureDetectionData
      )
    } else {
      updateMapMarketData(
        'add',
        marketType.value.pressureDetection,
        mapPressureDetectionData
      )
      setMapFlyto(mapPressureDetectionData[0].geometry.coordinates)
    }
    layerVisibleStatus.value.pressureDetection =
      !layerVisibleStatus.value.pressureDetection
  }
}

//新增或移除标记图层中对应的数据
const updateMapMarketData = (optype, ptype, list) => {
  let templist = JSON.parse(JSON.stringify(marketPointObj.value)).data.features
  if (optype == 'del') {
    for (let i = 0; i < templist.length; i++) {
      if (templist[i].properties.type == ptype) {
        templist.splice(i, 1)
        --i
      }
    }
  } else if (optype == 'add') {
    templist = templist.concat(list)
  }
  marketPointObj.value.data.features = templist
  mapboxGlObj.value
    .getSource(mapIds.value.dataIds.marketData)
    .setData(marketPointObj.value.data)
}

//信息弹窗
const showPop = (type, info) => {
  dialogInfo.value = {
    type,
    info,
  }
  console.log(dialogInfo.value)
  dialogVisible.value = true
}

defineExpose({
  changeLineStatus,
  changeWaterSourceStatus,
  changeWaterPlantStatus,
  changePressureDetectionStatus,
  changeWaterFlowmeterStatus,
  changeDiancifaStatus,
  changeDrainagePointStatus,
  changePoolStatus,
})
</script>
